<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnScrollList from '@tuniao/tnui-vue3-uniapp/components/scroll-list/src/scroll-list.vue'
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'
import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'
import TnSubsection from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection.vue'
import TnSubsectionItem from '@tuniao/tnui-vue3-uniapp/components/subsection/src/subsection-item.vue'
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import TnAvatarGroup from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar-group.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { useSubPageProvide } from './composables'
import type { IndexPageOnLoadFunc } from '@/types'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import PageContainer from '@/components/page-container/index.vue'
import circles from '@/api/circles.js'
import topic from '@/api/topic.js'
import user from '@/api/user.js'
import { FILE_URL, USER_TOKEN } from '@/api/config.js'

const paging = ref(null)
useZPaging(paging)
// 导航栏的高度
const navbarHeight = ref(0)
const state = reactive({
  currentTabIndex: 1,
  subsectionValue: 0,
  weigh: 'newest_publish',
  tabsList: [
    {
      id: 1,
      name: '关注',
    },
    {
      id: 2,
      name: '发现',
    },
  ],

  joinCirclesLists: [],
  topicLists: [],
  interestedUserData: [],
  circlesPostLists: [],
  userToken: '',
})

const jumpMap = (
  longitude: any,
  latitude: any,
  location: any,
  poiaddress: any
) => {
  tnNavPage(
    `/pagesA/location?longitude=${longitude}&latitude=${latitude}&location=${location}&poiaddress=${poiaddress}`
  )
}

const getUserJoinCirclesLists = () => {
  user
    .joinCirclesLists({
      page: 1,
      page_size: 20,
    })
    .then((res) => {
      if (res.code == 1) {
        state.joinCirclesLists = res.data
      }
    })
    .catch((err) => {
      console.log('获取加入的圈子列表数据失败', err)
    })
}

const moreUserList = () => {
  tnNavPage('/pagesA/moreuser')
}

const getTopicLists = () => {
  topic
    .topicLists({
      page: 1,
      page_size: 8,
      weigh: 'hot',
    })
    .then((res) => {
      if (res.code == 1) {
        state.topicLists = res.data
      }
    })
    .catch((err) => {
      console.log('获取话题列表数据失败', err)
    })
}

const getRecommendUsers = (pages: number, pageSize: number) => {
  user
    .recommendUsers({
      page: pages,
      page_size: pageSize,
    })
    .then((res) => {
      if (res.code == 1) {
        state.interestedUserData = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

// 跳转到圈子详情页面
const navCirclesDetailPage = (circlesId: number) => {
  tnNavPage(`/circlesPages/detail?circlesId=${circlesId}`)
}

// 跳转到帖子详情页面
const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}

const navVideoLists = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/video?circlesPostId=${circlesPostId}`)
}

// 跳转到用户主页
const navUserHomePage = (uId: number) => {
  checkLogin()
  tnNavPage(`/pagesA/userhome?otherUserId=${uId}`)
}

// 跳转到话题列表页面
const navTopicListsPage = () => {
  tnNavPage('/circlesPages/topic/lists')
}

// 跳转到话题详情页面
// eslint-disable-next-line camelcase
const navTopicDetailPage = (topic_name: string) => {
  tnNavPage(
    // eslint-disable-next-line camelcase
    `/circlesPages/topic/detail?topicName=${topic_name}`
  )
}
const addCircles = () => {
  checkLogin()
  tnNavPage('/circlesPages/create')
}
// 分类切换事件
const tabsChangeHandle = (index: number) => {
  state.circlesPostLists = []
  state.currentTabIndex = index
  paging.value.reload(true)
}

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const subsectionChange = (index: number) => {
  if (index == 0) {
    state.weigh = 'newest_publish'
  } else {
    state.weigh = 'newest_reply'
  }
  paging.value.reload(true)
}

const checkLogin = () => {
  if (state.userToken == '') {
    uni.showModal({
      title: '提示',
      content: '请登录后进行操作！',
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          tnNavPage('/pages/login/login')
        }
      },
    })
    return
  }
}

const onLoad: IndexPageOnLoadFunc = () => {
  console.log('pageB onLoad')
}
useSubPageProvide(1, {
  onLoad,
})

const queryList = (pageNo: any, pageSize: any) => {
  getUserJoinCirclesLists()
  getTopicLists()
  if (state.currentTabIndex == 0) {
    circles
      .followUserCirclesPostLists({
        page: pageNo,
        page_size: pageSize,
      })
      .then((res) => {
        if (res.code == 1) {
          res.data.forEach((dynamic) => {
            if (dynamic.attachment_type == 'image') {
              if (Array.isArray(dynamic.attachment)) {
                // 遍历 attachment 数组
                dynamic.attachment = dynamic.attachment.map((attachment) => {
                  return `${FILE_URL}${attachment}`
                })
              }
            }
          })
          paging.value.complete(res.data)
        }
      })
      .catch((err) => {
        paging.value.complete(false)
      })
  } else {
    circles
      .communityPostLists({
        page: pageNo,
        page_size: pageSize,
        weigh: state.weigh,
      })
      .then((res) => {
        if (res.code == 1) {
          res.data.forEach((dynamic) => {
            if (dynamic.attachment_type == 'image') {
              if (Array.isArray(dynamic.attachment)) {
                // 遍历 attachment 数组
                dynamic.attachment = dynamic.attachment.map((attachment) => {
                  return `${FILE_URL}${attachment}`
                })
              }
            }
          })
          paging.value.complete(res.data)
        }
      })
      .catch((err: any) => {
        paging.value.complete(false)
      })
  }
}

onMounted(() => {
  getRecommendUsers(1, 10)
  state.userToken = uni.getStorageSync(USER_TOKEN)
})
</script>

// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
}
</script>
// #endif

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      frosted
      back-icon=""
      back-text=""
      home-icon=""
      @init-finish="navbarInitFinishHandle"
    >
      <view class="navbar">
        <view class="search-operation" @tap.stop="tnNavPage('/pagesA/search')">
          <TnIcon name="search-menu-fill" />
        </view>
        <view class="tabs">
          <TnTabs
            v-model="state.currentTabIndex"
            bg-color="transparent"
            :bottom-shadow="false"
            :scroll="false"
            color="var(--tn-color-primary)"
            active-color="var(--tn-color-primary)"
            font-size="34"
            @change="tabsChangeHandle"
          >
            <TnTabsItem
              v-for="(item, index) in state.tabsList"
              :key="index"
              :title="item.name"
            />
          </TnTabs>
        </view>
      </view>
    </TnNavbar>
    <view class="page">
      <view class="page-container">
        <z-paging
          ref="paging"
          v-model="state.circlesPostLists"
          :paging-style="{ paddingTop: `${navbarHeight}px` }"
          :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true"
          @query="queryList"
        >
          <template #refresher="{ refresherStatus }">
            <CustomRefresher :status="refresherStatus" />
          </template>
          <scroll-view
            v-if="state.currentTabIndex == 0"
            class="page-scroll"
            scroll-y
          >
            <!-- 可能认识的人 -->
            <view class="tn-m">
              <view
                class=""
                style="
                  background: linear-gradient(180deg,#80dfff,#b3ecff,#ccf2ff);
                  border-radius: 15rpx;
                "
              >
                <view
                  class="interested-users tn-flex tn-flex-row justify-between items-center"
                >
                  <view class="tn-ml-sm">
                    <view class="tn-color-purple">
                      <text class="tn-text-bold interested-title"
                        >你可能感兴趣的用户</text
                      >
                    </view>
                  </view>
                  <view class="interested-more">
                    <TnButton
                      shape="round"
                      bg-color="#01beff"
                      text-color="#FFFFFF"
                      font-size="22"
                      shadow
                      @click="moreUserList"
                    >
                      <text class="tn-text-bold">查看更多</text>
                    </TnButton>
                  </view>
                </view>

                <TnScrollList :indicator="false">
                  <view class="interested-item-container tn-mt-sm">
                    <view
                      v-for="(item, index) in state.interestedUserData"
                      :key="index"
                      class="scroll-item tn-flex-column"
                      @tap.stop="navUserHomePage(item.id)"
                    >
                      <view
                        class="image-piccapsule2"
                        :style="
                          'background-image: url(' +
                          FILE_URL +
                          item.avatar +
                          ')'
                        "
                      >
                        <view class="image-capsule2" />
                      </view>
                      <view class="title tn-text-ellipsis-1">{{
                        item.nickname
                      }}</view>
                    </view>
                  </view>
                </TnScrollList>
              </view>
            </view>
            <view
              style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
            />
            <view v-for="(item, index) in state.circlesPostLists" :key="index">
              <view class="graphic-card">
                <!-- 简要信息 -->
                <view class="brief-info">
                  <view class="brief-info__content">
                    <view class="brief-info__avatar">
                      <TnAvatar
                        v-if="item.user.is_vip == 1"
                        :url="FILE_URL + item.user.avatar"
                        :border="true"
                        :shadow="true"
                        img-mode="aspectFill"
                        size="lg"
                        badge="icon-vip-diamond-fill"
                        :badge-config="{
                          absoluteCenter: false,
                          absolutePosition: {
                            top: '60rpx',
                            right: '-10rpx',
                          },
                          fontSize: '35',
                          textColor: '#FFB800',
                          bgColor: '#FFFFFF',
                          size: '40',
                        }"
                        @click="navUserHomePage(item.user.id)"
                      />
                      <TnAvatar
                        v-else
                        :url="FILE_URL + item.user.avatar"
                        :border="true"
                        :shadow="true"
                        img-mode="aspectFill"
                        size="lg"
                        @click="navUserHomePage(item.user.id)"
                      />
                    </view>
                    <view class="brief-info__data">
                      <view class="title tn-text-ellipsis-1">
                        <text @click="navUserHomePage(item.user.id)">
                          {{ item.user.nickname }}
                        </text>
                        <image
                          v-if="item.user.grade_icon != ''"
                          :src="FILE_URL + item.user.grade_icon"
                          class="user-level-img"
                        />
                      </view>
                      <view class="desc tn-text-ellipsis-1">
                        {{ item.update_date }}
                      </view>
                    </view>
                  </view>
                  <view class="brief-info__operation">
                    <slot name="briefOperation">
                      <view class="brief-info__operation" />
                    </slot>
                  </view>
                </view>
                <!-- 内容容器 -->
                <view class="container">
                  <!-- 内容 -->
                  <view class="content tn-text-ellipsis-5">
                    <!-- 标签和内容 -->
                    <view class="content__tags">
                      <view
                        v-for="(tagItem, tagIndex) in item.topics_name"
                        :key="tagIndex"
                        class="tag-item"
                      >
                        <text @click="navTopicDetailPage(tagItem)">
                          #{{ tagItem }}
                        </text>
                      </view>
                    </view>
                    <view
                      class="content__data"
                      @tap.stop="navCirclesPostDetailPage(item.id)"
                    >
                      <text>{{ item.content }}</text>
                    </view>
                  </view>
                  <!-- 图片列表 -->
                  <view
                    v-if="item.attachment_type == 'image'"
                    class="images"
                    @tap.stop="navCirclesPostDetailPage(item.id)"
                  >
                    <!-- 一张图片 -->
                    <view
                      v-if="item.attachment.length === 1"
                      class="images-one"
                    >
                      <TnLazyLoad :src="item.attachment[0]" />
                    </view>
                    <!-- 两张图片 -->
                    <view
                      v-if="item.attachment.length === 2"
                      class="images-two"
                    >
                      <TnPhotoAlbum :data="item.attachment" :column="2" />
                    </view>
                    <!-- 三张图片 -->
                    <view
                      v-if="item.attachment.length === 3"
                      class="images-three"
                    >
                      <view class="image-wrapper-left">
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[0]" />
                        </view>
                      </view>
                      <view class="image-wrapper-right">
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[1]" />
                        </view>
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[2]" />
                        </view>
                      </view>
                    </view>
                    <!-- 四张图片 -->
                    <view
                      v-if="item.attachment.length === 4"
                      class="images-four"
                    >
                      <TnPhotoAlbum :data="item.attachment" :column="2" />
                    </view>
                    <TnPhotoAlbum
                      v-if="item.attachment.length >= 5"
                      :data="item.attachment"
                    />
                  </view>

                  <!-- 视频 -->
                  <view
                    v-if="item.attachment_type == 'video'"
                    class="content-video"
                    @click="navVideoLists(item.id)"
                  >
                    <view class="video-icon">
                      <TnIcon name="video-fill" size="100" color="#FFFFFF" />
                    </view>
                    <video
                      class="video-data"
                      :src="FILE_URL + item.attachment"
                      :muted="true"
                      object-fit="cover"
                      :enable-progress-gesture="false"
                      :show-loading="false"
                      :show-play-btn="false"
                      :show-center-play-btn="false"
                      :show-fullscreen-btn="false"
                      :controls="false"
                      :autoplay="false"
                      :enable-play-gesture="false"
                      :loop="true"
                    />
                  </view>

                  <!-- 语音 -->
                  <view v-if="item.attachment_type == 'voice'" class="audio">
                    <luch-audio
                      :play.sync="true"
                      :name="item.user.nickname"
                      author="录制"
                      :poster="FILE_URL + item.user.avatar"
                      :src="FILE_URL + item.attachment"
                      :autoplay="false"
                    />
                  </view>
                </view>

                <!-- 链接 -->
                <view v-if="item.attachment_type == 'link'" class="link">
                  <uni-link
                    :href="item.attachment"
                    :text="item.attachment"
                    color="#007BFF"
                    copy-tips="链接已复制"
                    font-size="18"
                  />
                </view>

                <!-- 底部信息 -->
                <view v-if="item.location !== ''" class="location-info">
                  <TnButton
                    plain
                    border-color="tn-grey-disabled"
                    custom-class="custom-button-class"
                    @click="
                      jumpMap(
                        item.longitude,
                        item.latitude,
                        item.location,
                        item.poiaddress
                      )
                    "
                  >
                    <TnIcon name="location-fill" color="tn-blue" />
                    <view class="location-name">{{ item.location }}</view>
                  </TnButton>
                </view>
                <view class="bottom-info">
                  <view class="bottom-info__left">
                    <view class="tag-circles">
                      <view class="tn-flex-center-center">
                        <view class="circles-pic">
                          <view
                            class="circles-image"
                            :style="
                              'background-image: url(' +
                              FILE_URL +
                              item.circles?.image +
                              ')'
                            "
                          />
                        </view>
                        <view
                          class="circles-name tn-text-ellipsis-1"
                          @tap.stop="navCirclesDetailPage(item.circles.id)"
                        >
                          {{ item.circles?.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="bottom-info__right">
                    <!-- 底部右侧数据 -->
                    <view class="count-item-data">
                      <TnIcon name="eye" />
                      <view class="count">{{ item.view_total }}</view>
                    </view>
                    <view class="count-item-data">
                      <TnIcon name="message" />
                      <view class="count"> {{ item.comment_total }} </view>
                    </view>
                    <view
                      v-if="item.plate == 'dynamic'"
                      class="count-item-data"
                    >
                      <TnIcon name="like" />
                      <view class="count">{{ item.like_total }}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view
                style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
              />
            </view>
          </scroll-view>
          <scroll-view
            v-if="state.currentTabIndex == 1"
            class="page-scroll"
            scroll-y
          >
            <view
              class="tn-flex-row tn-round tn-p-xs tn-m"
              style="
                background: linear-gradient(-160deg,#f1f7ff,#dee6ff,#f3f8ff,#d0dbff);
                display: flex;
                align-items: center;
              "
            >
              <view
                style="padding: 28rpx 30rpx 22rpx; flex: 1; align-items: center"
              >
                <TnAvatarGroup border>
                  <TnAvatar
                    v-for="(item, index) in state.interestedUserData"
                    :key="index"
                    :url="FILE_URL + item.avatar"
                    size="sm"
                  />
                </TnAvatarGroup>
              </view>
              <view class="tn-text-center tn-pt-xs tn-pr-lg">
                <view class="tn-text-bold"> 官方社区 </view>
                <view class="tn-text-xs tn-pt-xs"> 美好社区，邀您共建 </view>
              </view>
            </view>

            <view
              style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
            />
            <view class="circles-list-title nav-title">
              <view class="left">
                <TnTitle
                  title="我加入的圈子"
                  mode="subTitle"
                  sub-title="my-join-circles"
                  size="lg"
                  class="tn-text-bold"
                />
              </view>
              <view class="right" @click="addCircles">
                创建圈子
                <TnIcon name="add-circle" />
              </view>
            </view>
            <!-- 我的圈子列表 -->
            <TnScrollList :indicator="false">
              <view class="circles-list-container">
                <view
                  class="scroll-item tn-flex-center tn-flex-column"
                  @tap.stop="tnNavPage('/circlesPages/classify')"
                >
                  <view class="item-icon tn-white_text tn-gradient-bg__cool-6">
                    <TnIcon name="circle-more" />
                  </view>
                  <view class="circles-title">圈子广场</view>
                </view>
                <view
                  v-for="(item, index) in state.joinCirclesLists"
                  :key="index"
                  class="scroll-item tn-flex-center tn-flex-column"
                  @tap.stop="navCirclesDetailPage(item.circles.id)"
                >
                  <view class="icon">
                    <image
                      :src="FILE_URL + item.circles?.image"
                      mode="scaleToFill"
                    />
                  </view>
                  <view class="circles-title">{{ item.circles?.name }}</view>
                </view>
              </view>
            </TnScrollList>

            <view
              style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
            />

            <!-- 推荐话题 -->
            <view class="nav-title">
              <view class="left">
                <TnTitle
                  title="大家都在讨论"
                  mode="subTitle"
                  sub-title="recommend-topic"
                  size="lg"
                  class="tn-text-bold"
                />
              </view>
              <view class="right" @tap.stop="navTopicListsPage">
                <view class="right">
                  更多
                  <TnIcon name="topics" />
                </view>
              </view>
            </view>
            <view class="recommend-topic">
              <view class="topic-list">
                <view
                  v-for="(item, index) in state.topicLists"
                  :key="index"
                  class="list-item"
                  @tap.stop="navTopicDetailPage(item?.name)"
                >
                  <view class="item-content">
                    <view class="list-info">
                      <view class="icon">
                        <TnIcon name="topics-fill" size="36rpx" />
                      </view>
                      <view class="tn-text-ellipsis-1">{{ item?.name }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view
              style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
            />

            <!-- 动态列表 -->
            <view class="nav-title">
              <view class="left">
                <TnTitle
                  title="动态列表"
                  mode="subTitle"
                  sub-title="dynamic"
                  size="lg"
                  class="tn-text-bold"
                />
              </view>
              <view class="right">
                <TnSubsection
                  v-model="state.subsectionValue"
                  size="sm"
                  mode="button"
                  @change="subsectionChange"
                >
                  <TnSubsectionItem title="新发" />
                  <TnSubsectionItem title="新回" />
                </TnSubsection>
              </view>
            </view>
            <view v-for="(item, index) in state.circlesPostLists" :key="index">
              <view class="graphic-card">
                <!-- 简要信息 -->
                <view class="brief-info">
                  <view class="brief-info__content">
                    <view class="brief-info__avatar">
                      <TnAvatar
                        v-if="item.user.is_vip == 1"
                        :url="FILE_URL + item.user.avatar"
                        :border="true"
                        :shadow="true"
                        img-mode="aspectFill"
                        size="lg"
                        badge="icon-vip-diamond-fill"
                        :badge-config="{
                          absoluteCenter: false,
                          absolutePosition: {
                            top: '60rpx',
                            right: '-10rpx',
                          },
                          fontSize: '35',
                          textColor: '#FFB800',
                          bgColor: '#FFFFFF',
                          size: '40',
                        }"
                        @click="navUserHomePage(item.user.id)"
                      />
                      <TnAvatar
                        v-else
                        :url="FILE_URL + item.user.avatar"
                        :border="true"
                        :shadow="true"
                        img-mode="aspectFill"
                        size="lg"
                        @click="navUserHomePage(item.user.id)"
                      />
                    </view>
                    <view class="brief-info__data">
                      <view class="title tn-text-ellipsis-1">
                        <text @click="navUserHomePage(item.user.id)">
                          {{ item.user.nickname }}
                        </text>
                        <image
                          v-if="item.user.grade_icon != ''"
                          :src="FILE_URL + item.user.grade_icon"
                          class="user-level-img"
                        />
                      </view>
                      <view class="desc tn-text-ellipsis-1">
                        {{ item.update_date }}
                      </view>
                    </view>
                  </view>
                  <view class="brief-info__operation">
                    <slot name="briefOperation">
                      <view class="brief-info__operation" />
                    </slot>
                  </view>
                </view>
                <!-- 内容容器 -->
                <view class="container">
                  <!-- 内容 -->
                  <view class="content tn-text-ellipsis-5">
                    <!-- 标签和内容 -->
                    <view class="content__tags">
                      <view
                        v-for="(tagItem, tagIndex) in item.topics_name"
                        :key="tagIndex"
                        class="tag-item"
                      >
                        <text @click="navTopicDetailPage(tagItem)">
                          #{{ tagItem }}
                        </text>
                      </view>
                    </view>
                    <view
                      class="content__data"
                      @tap.stop="navCirclesPostDetailPage(item.id)"
                    >
                      <text>{{ item.content }}</text>
                    </view>
                  </view>
                  <!-- 图片列表 -->
                  <view
                    v-if="item.attachment_type == 'image'"
                    class="images"
                    @tap.stop="navCirclesPostDetailPage(item.id)"
                  >
                    <!-- 一张图片 -->
                    <view
                      v-if="item.attachment.length === 1"
                      class="images-one"
                    >
                      <TnLazyLoad :src="item.attachment[0]" />
                    </view>
                    <!-- 两张图片 -->
                    <view
                      v-if="item.attachment.length === 2"
                      class="images-two"
                    >
                      <TnPhotoAlbum :data="item.attachment" :column="2" />
                    </view>
                    <!-- 三张图片 -->
                    <view
                      v-if="item.attachment.length === 3"
                      class="images-three"
                    >
                      <view class="image-wrapper-left">
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[0]" />
                        </view>
                      </view>
                      <view class="image-wrapper-right">
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[1]" />
                        </view>
                        <view class="image-container">
                          <TnLazyLoad :src="item.attachment[2]" />
                        </view>
                      </view>
                    </view>
                    <!-- 四张图片 -->
                    <view
                      v-if="item.attachment.length === 4"
                      class="images-four"
                    >
                      <TnPhotoAlbum :data="item.attachment" :column="2" />
                    </view>
                    <TnPhotoAlbum
                      v-if="item.attachment.length >= 5"
                      :data="item.attachment"
                    />
                  </view>

                  <!-- 视频 -->
                  <view
                    v-if="item.attachment_type == 'video'"
                    class="content-video"
                    @click="navVideoLists(item.id)"
                  >
                    <view class="video-icon">
                      <TnIcon name="video-fill" size="100" color="#FFFFFF" />
                    </view>
                    <video
                      class="video-data"
                      :src="FILE_URL + item.attachment"
                      :muted="true"
                      object-fit="cover"
                      :enable-progress-gesture="false"
                      :show-loading="false"
                      :show-play-btn="false"
                      :show-center-play-btn="false"
                      :show-fullscreen-btn="false"
                      :controls="false"
                      :autoplay="false"
                      :enable-play-gesture="false"
                      :loop="true"
                    />
                  </view>

                  <!-- 语音 -->
                  <view v-if="item.attachment_type == 'voice'" class="audio">
                    <luch-audio
                      :play.sync="true"
                      :name="item.user.nickname"
                      author="录制"
                      :poster="FILE_URL + item.user.avatar"
                      :src="FILE_URL + item.attachment"
                      :autoplay="false"
                    />
                  </view>
                </view>

                <!-- 链接 -->
                <view v-if="item.attachment_type == 'link'" class="link">
                  <uni-link
                    :href="item.attachment"
                    :text="item.attachment"
                    color="#007BFF"
                    copy-tips="链接已复制"
                    font-size="18"
                  />
                </view>

                <!-- 底部信息 -->
                <view v-if="item.location !== ''" class="location-info">
                  <TnButton
                    plain
                    border-color="tn-grey-disabled"
                    custom-class="custom-button-class"
                    @click="
                      jumpMap(
                        item.longitude,
                        item.latitude,
                        item.location,
                        item.poiaddress
                      )
                    "
                  >
                    <TnIcon name="location-fill" color="tn-blue" />
                    <view class="location-name">{{ item.location }}</view>
                  </TnButton>
                </view>
                <view class="bottom-info">
                  <view class="bottom-info__left">
                    <view class="tag-circles">
                      <view class="tn-flex-center-center">
                        <view class="circles-pic">
                          <view
                            class="circles-image"
                            :style="
                              'background-image: url(' +
                              FILE_URL +
                              item.circles?.image +
                              ')'
                            "
                          />
                        </view>
                        <view
                          class="circles-name tn-text-ellipsis-1"
                          @tap.stop="navCirclesDetailPage(item.circles.id)"
                        >
                          {{ item.circles?.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="bottom-info__right">
                    <!-- 底部右侧数据 -->
                    <view class="count-item-data">
                      <TnIcon name="eye" />
                      <view class="count">{{ item.view_total }}</view>
                    </view>
                    <view class="count-item-data">
                      <TnIcon name="message" />
                      <view class="count"> {{ item.comment_total }} </view>
                    </view>
                    <view
                      v-if="item.plate == 'dynamic'"
                      class="count-item-data"
                    >
                      <TnIcon name="like" />
                      <view class="count">{{ item.like_total }}</view>
                    </view>
                  </view>
                </view>
              </view>
              <view
                style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
              />
            </view>
          </scroll-view>
        </z-paging>
      </view>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use '@/static/css/community.scss';
@use '@/static/css/graphic-card.scss';
</style>
